<template>
    <div
        class="main-page-container"
        :style="{ height: `${clientHeight - 50}px` }"
    >
        <SystemError
            :show="showSystemError"
            @close="
                () => {
                    showSystemError = false;
                }
            "
        />
        <WorktimeError
            :show="showWorktimeError"
            @close="
                () => {
                    showWorktimeError = false;
                }
            "
        />
        <DeviceInfo />
        <!-- <guide /> -->
    </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import SystemError from "../components/error/SystemError.vue";
import WorktimeError from "../components/error/WorktimeError.vue";
import DeviceInfo from "../components/device/DeviceInfo.vue";
import Guide from "@/components/device/Guide.vue";

export default {
    components: { WorktimeError, SystemError, DeviceInfo, Guide },
    data() {
        return {
            showSystemError: true,
            showWorktimeError: false,
        };
    },
    created() {
        document.title = "迈瑞视频客服";
    },
    computed: {
        ...mapState("app", ["clientHeight", "hangupReason"]),
    },
    mounted() {
        this.$nextTick(() => {
            this.handleHangup();
        });
    },
    methods: {
        ...mapActions("app", ["updateHangupReason"]),

        handleHangup() {
            if (this.hangupReason === undefined) {
                // this.showRate = true;
            } else if (this.hangupReason === "cancel") {
                // this.showSubmitForm = true;
            }
            this.updateHangupReason("");
        },
    },
};
</script>

<style lang="less" scoped>
.main-page-container {
    width: 100%;
    overflow-y: auto;
}
</style>
